<template>
  <div class="proto-viewport">
    <div class="prev-page">
      <span class="dot"></span>
      <span>链接上一页</span>
    </div>

    <!-- 坐标系，参考线 -->
    <div class="coordinate-system">
      <!-- 横坐标 - 左侧、横线 -->
      <div class="coordinate-x">
        <canvas id="coordinate-x" class="coordinate" width="16" height="869"></canvas>
      </div>

      <!-- 纵坐标 - 上侧、竖线 -->
      <div class="coordinate-y">
        <canvas id="coordinate-y" class="coordinate" width="837" height="16"></canvas>
      </div>
      <a href="JavaScript:void(0)" class="corner"></a>
    </div>

    <div class="right-quick-toolbar">
      <!-- 状态 -->
      <a-tooltip placement="left" class="ant-tooltip-open">
        <template slot="title">
          <span>状态</span>
        </template>
        <a class="item">
          <icon name="icon-faxiandianjizhuangtai-" />
          <span class="line"></span>
        </a>
      </a-tooltip>

      <!-- 内置组件 -->
      <a-tooltip placement="left" class="ant-tooltip-open">
        <template slot="title">
          <span>内置组件</span>
        </template>
        <a class="item">
          <icon name="icon-gongju" />
          <span class="line"></span>
        </a>
      </a-tooltip>

      <!-- 我的组件 -->
      <a-tooltip placement="left" class="ant-tooltip-open">
        <template slot="title">
          <span>我的组件</span>
        </template>
        <a class="item">
          <icon name="icon-zujian" />
          <span class="line"></span>
        </a>
      </a-tooltip>

      <!-- 图标 -->
      <a-tooltip placement="left" class="ant-tooltip-open">
        <template slot="title">
          <span>图标</span>
        </template>
        <a class="item">
          <icon name="expressionsuccessful" />
          <span class="line"></span>
        </a>
      </a-tooltip>

      <!-- 母版 -->
      <a-tooltip placement="left" class="ant-tooltip-open">
        <template slot="title">
          <span>母版</span>
        </template>
        <a class="item">
          <icon name="icon-xiugaimuban" />
          <span class="line"></span>
        </a>
      </a-tooltip>
    </div>

    <!-- 滚动条 -->
    <div class="scroll-bar">
      <div class="scroll-x">
        <div class="handler handler-x">
          <div class="thumb"></div>
        </div>
      </div>
      <div class="scroll-y">
        <div class="handler handler-y">
          <div class="thumb"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    // 获取div大小

    let coordinateX = document.getElementById('coordinate-x')
    let coordinateXCtx = coordinateX.getContext('2d')
    coordinateXCtx.fillStyle = '#F5F5F5'
    coordinateXCtx.fillRect(0, 16, 16, 896)

    let coordinateY = document.getElementById('coordinate-y')
    let coordinateYCtx = coordinateY.getContext('2d')
    coordinateYCtx.fillStyle = '#F5F5F5'
    coordinateYCtx.fillRect(16, 0, 837, 16)
  }
}
</script>
<style lang="less" scoped>
@import './scroll-bar.less';
.proto-viewport {
  display: flex;
  flex-direction: column;
  min-width: 400px;
  flex: 1 1 0%;
  position: relative;

  // 上一页
  .prev-page {
    z-index: 15;

    top: 25px;

    pointer-events: auto;
    position: absolute;
    left: 27px;
    width: 100px;
    height: 28px;
    padding-left: 10px;
    padding-right: 8px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(39, 54, 78, 0.08) 0px 2px 5px 0px;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    border-radius: 2px;

    .dot {
      width: 6px !important;
      height: 6px !important;
      border-radius: 50%;
      background: rgb(200, 205, 208);
      border-width: 1px;
      border-style: solid;
      border-color: rgb(125, 134, 148);
      border-image: initial;
    }
  } // end .pre-page
  .prev-page:hover {
    color: rgb(91, 107, 115);
    background: rgb(245, 245, 245);
  }

  // 坐标系
  .coordinate-system {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    font-size: 12px;
    overflow: hidden;
    .coordinate {
      // border: 1px red solid;
      position: absolute;
      pointer-events: auto;
    }
    .corner {
      background-color: rgba(235, 86, 72, 0.6) !important;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 16px;
      height: 16px;
      pointer-events: auto;
      cursor: pointer;
      box-sizing: content-box;
      border-right: 1px solid rgb(218, 218, 220);
      border-bottom: 1px solid rgb(218, 218, 220);
      transition: all 0.2s ease-in-out 0s;
    }
    // .coordinate-y {
    //   left: 16px;
    //   top: 0px;
    //   width: calc(100% - 16px);
    //   height: 17px;
    // }
  }

  .right-quick-toolbar {
    position: absolute;
    top: 32px;
    right: 14px;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    box-shadow: rgba(39, 54, 78, 0.08) 0px 2px 10px 0px,
      rgba(39, 54, 78, 0.1) 0px 12px 40px 0px;
    pointer-events: auto;
    z-index: 15;
    background: rgb(255, 255, 255);
    border-radius: 2px;
    .item {
      width: 32px;
      font-size: 18px;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      cursor: pointer;
      height: 36px;
      position: relative;
      transition: background-color 0.2s ease-out 0s;
      .line {
        position: absolute;
        bottom: 0px;
        width: 20px;
        border-top: 1px solid rgb(219, 219, 219);
      }
    }
    .item:hover {
      background-color: rgb(232, 232, 232);
    }
  } // end .right-quick-toolbar
}
</style>